<template>
    <div class="bgc">
        <Title class="f">
            <van-icon name="arrow-left" class="arrow" @click="$router.go(-1)"/>
            商品搜索
        </Title>
        <!-- 搜索模块 -->
        <van-search 
            v-model="value" 
            placeholder="搜索商品"  
            show-action
            @blur="searchList(keyword)"
            :value="keyword" 
            @change="handleChange"
            @focus = "listVanish"
            @cancel="onCancel(keyword)"
        />
        <div class="hisBox" v-if="showHisBox">
            <p>搜索历史</p>
            <div class="clearcon" >
                <van-icon name="cross" @click="delHandler"/>清除
            </div>
            <div class="clear"></div>
            <div class="buttons" v-for="(key,index) in keywordlist" :key="index" @click="searchList(key)">{{key}}</div>
        </div>
        <div v-if='listVani'>
            <!-- 排序 -->
            <Sort></Sort>
            <!-- 列表 -->
            <div class="goods-list">
                <GoodItem  :goodslist="goodslists"></GoodItem>
            </div>
        </div>
        
    </div>
</template>
<script>
import Title from "home/Title";
import Vue from "vue";
import Sort from "../../components/home/sort"
import GoodItem from 'components/goods/GoodItem.vue'
import { getGoodsList } from "@/api/goods.js";
import { Icon,Search } from "vant";

Vue.use(Icon);
Vue.use(Search);
export default {
    data(){
        return{
            value:'',
            keywordlist: [],
            keyword: "",
            showHisBox:'',
            goodslist:[],
            goodslists:[],
            listVani:false
        }
    },
    watch:{
        keyword(newval,oldval){
            this.$cache.add(newval)
            this.keywordlist = this.$cache.get().reverse()
        }
    },
    methods:{
        // 监听输入的内容
        handleChange(event){
            this.keyword = event.target.value
        },
        // 删除所有历史记录
        delHandler(){
            this.$cache.del()
            this.keywordlist = this.$cache.get()
            this.showHisBox = false
        },
        // 获取商品列表
        async getGoods(params) {
            let rs = await getGoodsList(params);
            this.goodslist = rs.data;
            console.log(this.goodslist);
        },
        searchList(word){
            console.log(word)
            console.log("可以跳转了")
            if(word!==''){
                console.log("aaa")
                this.goodslists = [];
                for(let i=0;i<this.goodslist.length;i++){
                    if(this.goodslist[i].brandCountryName.indexOf(word)>=0){
                        this.goodslists.push(this.goodslist[i])
                    }
                }
                this.showHisBox = false
                this.listVani = true
            }
            return this.goodslists
        },
        listVanish(){
            if(this.keyword){
                this.showHisBox = true
            }
            this.keyword = ""
            this.listVani = false
            
        },
        // 取消
        onCancel(keyword) {
             this.listVani = false
            this.showHisBox = true
        },
    },
    created(){
        this.getGoods();
    },
    components: {
        Title,
        Sort,
        GoodItem
    },
    mounted(){
        this.keywordlist = this.$cache.get().reverse()
        if(this.keywordlist.length>0){
            this.showHisBox = true
        }
    }
}
</script>
<style lang="stylus" scoped>
.bgc
    background: rgb(247,248,250)
    height 100% 
.van-icon-arrow-left::before 
    text-align left !important 
.f
    position relative
.arrow
    position absolute
    left .2rem
    line-height 0.64rem
.van-search__content
    border-radius .15rem
.van-search .van-cell
    border-radius .15rem
.hisBox
    background-color #fff
    padding .1rem
    margin .15rem
    font-size 0.12rem
    overflow hidden
.hisBox p
    float left
    font-weight 600
.hisBox .clearcon
    float right
    color #999
    font-weight 600
.buttons
    border-radius .2rem
    color #000
    line-height: 8px;
    text-align: center;
    font-size: 8px;
    padding: 5px 9px;
    float left
    margin 0.08rem
    background-color #eee
.clear
    clear both
.searchList
    clear both
</style>